Item component by leibole · Pull Request #57 · stackbit/stackbit-components

leibole · 2021-11-11T09:20:27Z

No description provided.

netlify · 2021-11-11T09:20:33Z

✔️ Deploy Preview for stackbit-components ready!

🔨 Explore the source changes: 4363b82

🔍 Inspect the deploy log: https://app.netlify.com/sites/stackbit-components/deploys/6197f10d001e900007f8d369

😎 Browse the preview: https://deploy-preview-57--stackbit-components.netlify.app

TomasBankauskas · 2021-11-11T12:45:35Z

@@ -0,0 +1,121 @@
+type: object
+name: FeaturedItem


Following the naming pattern, you should name the section FeaturedItemsSection.

TomasBankauskas · 2021-11-11T12:55:50Z

+  - type: string
+    name: title
+    label: Title
+    default: Item


This is the field for the section title, not the item title, and in most cases the section will consist of more than one item. Please change the default value to something else, it could be "Reviews" or other.

TomasBankauskas · 2021-11-11T12:58:42Z

+  - type: string
+    name: subtitle
+    label: Subtitle
+    default: Featured blog posts section example


Please change the default value.

TomasBankauskas · 2021-11-11T13:03:33Z

+        borderColor:
+          - value: 'border-primary'
+            label: 'Primary color'
+            styleObjectColor: 'primary'
+          - value: 'border-secondary'
+            label: 'Secondary color'
+            styleObjectColor: 'secondary'
+          - value: 'border-neutral'
+            label: 'Neutral color'
+            styleObjectColor: 'neutral'
+          - value: 'border-complementary'
+            label: 'Complementary color'
+            styleObjectColor: 'complementary'
+          - value: 'border-complementary-alt'
+            label: 'Complementary alt color'
+            styleObjectColor: 'complementaryAlt'


styleObjectColor was removed use this link as example how to update the values ->

stackbit-components/models/HeroSection.yaml

Line 82 in 534876a

borderColor:

JugglerX · 2021-11-15T03:41:47Z

@leibole Hey a few things to make this process easier for me to review.

Can you please add links to the Notion task and Figma design in the PR's description.
Can you please provide a brief summary of the purpose of this component?

I tested the component. It does not look like the components design is finished. I've attached a screenshot:

Note: I added the dist folder so I could test your component in the Studio using github dependancies. It worked nicely. Sorry this creates a lot of junk into the PR. If @smnh approves adding the dist folder, we can move it to a seperate PR.

JugglerX · 2021-11-15T03:51:09Z

@@ -0,0 +1,115 @@
+import * as React from 'react';
+


nit: no need for line breaks between these imports

JugglerX · 2021-11-15T03:54:53Z

+
+export default function FeaturedItemsSection(props) {
+    const sectionStyles = props.styles?.self || {};
+


Most other components declare cssId and colors variables here.

const cssId = props.elementId || null; const colors = props.colors || 'colors-a';

You will need the cssId, which should be added as the id of the components main

Not sure if you need the colors. @TomasBankauskas What's the go here, are all components supposed to work with colors?

JugglerX · 2021-11-15T03:55:04Z

+
+    const sectionBorderWidth = sectionStyles.borderWidth ? sectionStyles.borderWidth : 0;
+    return (
+        <div


<div id={cssId}

JugglerX · 2021-11-15T03:57:08Z

+    return (
+        <div
+            className={classNames(
+                'sb-component',


All components should have the following classes following specific naming conventions

'sb-component', 'sb-component-section', (if the component is a section, alternatively it can be sb-component-layout or sb-component-block) 'sb-component-featured-items-section' (based on components name ie FeaturedItemsSection)

JugglerX · 2021-11-15T04:00:24Z

+            }}
+            data-sb-field-path={props.annotationPrefix}
+        >
+            <div


I wont comment on the main component until the design is finished. I tried a few of the different options in the Studio like changing the alignment and justify and they did not seem to align properly.

JugglerX · 2021-11-15T04:15:02Z

+        label: Get Started
+        url: '/'
+        style: primary
+        elementId: hero-main-button


delete elementId default

JugglerX · 2021-11-15T04:16:07Z

+        label: Get Started
+        url: '/'
+        style: primary
+        elementId: hero-main-button


delete elementId default

JugglerX · 2021-11-15T04:16:23Z

+  - name: settings
+    label: Settings
+fields:
+  - type: string


Missing elementId field

I think it's inherited from the section yaml.

Yes I think you are right. No need to add it then.

JugglerX · 2021-11-15T04:17:35Z

+    const sectionBorderWidth = sectionStyles.borderWidth ? sectionStyles.borderWidth : 0;
+    return (
+        <div
+            className={classNames(


missing elementId and classes. I commented on this in more detail on the FeaturedItemSection component

JugglerX · 2021-11-15T04:18:07Z

+const Template = (args) => <Item {...args} />;
+
+const args = {
+    type: 'Item',


args should use the same values as the model default values

leibole · 2021-11-15T05:52:51Z

@JugglerX These are the notion docs:
https://www.notion.so/stackbit/stackbit-components-Featured-Items-section-component-accfa01db7e447b98597afe611e2d060
https://www.notion.so/stackbit/stackbit-components-Item-component-9ceeb2cdf07d46df8f0e75d3856e766b

As you can see in the notion docs, there's still no design for these, which is why I implemented something very basic.

TomasBankauskas suggested changes Nov 11, 2021

View reviewed changes

leibole force-pushed the item-component branch from 9e722b5 to 9eff6ff Compare November 11, 2021 17:09

leibole requested a review from TomasBankauskas November 11, 2021 17:11

leibole marked this pull request as ready for review November 13, 2021 06:07

JugglerX suggested changes Nov 15, 2021

View reviewed changes

leibole added 9 commits November 18, 2021 17:41

Create new item component

d562815

Add FeaturedItem

371b0bb

Add stories to Item and FeaturedItem

83b4cf7

Fix validation errors

1462f36

Move item into Blocks in storybook

8f900f2

Fix comments from code review

166ff7f

Remove style properties from Item

d65706d

Add image to item

35a2040

Add columns for Items in FeaturedItemsSection

4449fb3

leibole force-pushed the item-component branch from 6d01f91 to 4449fb3 Compare November 18, 2021 15:59

TomasBankauskas added 2 commits November 19, 2021 09:59

updated models and components

9c1e419

added missing annotations, other fixes

4363b82

TomasBankauskas approved these changes Nov 19, 2021

View reviewed changes

leibole merged commit 0670a64 into main Nov 19, 2021

leibole deleted the item-component branch November 19, 2021 18:50


		export default function FeaturedItemsSection(props) {
		const sectionStyles = props.styles?.self \|\| {};

Conversation

leibole commented Nov 11, 2021

Uh oh!

netlify bot commented Nov 11, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

JugglerX commented Nov 15, 2021

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

leibole commented Nov 15, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

netlify bot commented Nov 11, 2021 •

edited

Loading

leibole commented Nov 15, 2021 •

edited

Loading